<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(4)
const dialogFormVisible = ref(false)
const form = ref({
  source: null,
  description: null,
  institute: null,
  major: null,
  grade: null,
  examDate: null,
  totalTime: null,
  totalScore: null,
  type: null,
  tips: null,
  paperId: null
})

onMounted(() => {
  handleCurrentChange()
})
const handleCurrentChange = () => {
  axios.get('api/examManagecontroller/findAll2/' + currentPage.value + '/' + pageSize.value).then(res => {
    tableData.value = res.data
    console.log(tableData.value)
  })
}

const edit = (examCode) => {
  dialogFormVisible.value = true
  axios.get('api/examManagecontroller/findById/' + examCode).then(res => {
    form.value = res.data
  })
}

const summit = () => {
  console.log(form.value)
  axios.post('api/examManagecontroller/update', {
    source: form.value.source,
    description: form.value.description,
    institute: form.value.institute,
    major: form.value.major,
    grade: form.value.grade,
    examDate: form.value.examDate,
    totalTime: form.value.totalTime,
    totalScore: form.value.totalScore,
    type: form.value.type,
    tips: form.value.tips,
    paperId: form.value.paperId
  }).then(res => {
    dialogFormVisible.value = false
    handleCurrentChange()
  })
}

const deleteRecord = (examCode) => {
  axios.get('api/examManagecontroller/deleteById/' + examCode).then(res => {
    handleCurrentChange()
  })
}

</script>

<template>
<div class="exam">
   <el-table :data="tableData" style="width: 100%" :border="true">
    <el-table-column fixed="left" prop="source" label="试卷名称" width="180" />
    <el-table-column prop="description" label="介绍" width="200" />
    <el-table-column prop="institute" label="所属学院" width="120" />
    <el-table-column prop="major" label="所属专业" width="200" />
    <el-table-column prop="grade" label="年纪" width="100" />
    <el-table-column prop="examDate" label="考试日期" width="120" />
    <el-table-column prop="totalTime" label="持续时间" width="60"/>
    <el-table-column prop="totalScore" label="总分" width="120"/>
    <el-table-column prop="type" label="试卷类型" width="120"/>
    <el-table-column prop="tips" label="考生提示" width="400"/>
    <el-table-column fixed="right" label="操作" width="150">
      <template #default="scope">
          <el-button @click="edit(scope.row.examCode)" type="primary" size="small">编辑</el-button>
          <el-button @click="deleteRecord(scope.row.examCode)" type="danger" size="small">删除</el-button>
        </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
       <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[6, 10, 20, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination> -->

       <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[1,2,3]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</div>

<!-- 编辑对话框-->
    <el-dialog
      title="编辑试卷信息"
      v-model="dialogFormVisible"
      width="30%"
      >
      <section class="update">
        <el-form   label-width="80px" :model="form"  >
          <el-form-item label="试卷名称">
            <el-input v-model="form.source" type="text"></el-input>
          </el-form-item>
          <el-form-item label="介绍">
            <el-input v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item label="所属学院">
            <el-input v-model="form.institute"></el-input>
          </el-form-item>
          <el-form-item label="所属专业">
            <el-input v-model="form.major"></el-input>
          </el-form-item>
          <el-form-item label="年级">
            <el-input v-model="form.grade"></el-input>
          </el-form-item>
          <el-form-item label="考试日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model.number="form.examDate" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="持续时间">
            <el-input v-model.number="form.totalTime"></el-input>
          </el-form-item>
          <el-form-item label="总分">
            <el-input v-model.number="form.totalScore"></el-input>
          </el-form-item>
          <el-form-item label="试卷类型">
            <el-input v-model="form.type"></el-input>
          </el-form-item>
          <el-form-item label="考生提示">
            <el-input type="textarea" v-model="form.tips"></el-input>
          </el-form-item>
        </el-form>
      </section>
       <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="summit()">Summit</el-button
        >
      </span>
    </template>
    </el-dialog>
</div>
</template>

<style lang="less" scoped>

.pagination .el-pagination {
  padding: 20px 0px 30px 0px;

    display: flex;
    justify-content: center;

}
.exam {
  padding: 10px 0px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edit{
    margin-left: 20px;
  }
}
</style>
